<template>
  <div class="box-left-menu-system">
    <!-- 系统管理system -->
    <el-row class="tac">
      <el-menu
        :default-active="active"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
        :unique-opened="true"
      >
        <el-submenu v-for="t in tree" :key="t.id" :index="t.url">
          <!-- 一级菜单 -->
          <template slot="title">
            <i class="el-icon-s-tools"></i>
            <span>{{ t.label }}</span>
          </template>

          <el-menu-item
            v-for="item in t.children"
            :key="item.id"
            :index="item.url"
          >
            <i class="el-icon-s-custom"></i>{{ item.label }}</el-menu-item
          >
        </el-submenu>
      </el-menu>
    </el-row>
  </div>
</template>

<script>
import { mapActions, mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      active: "",
    };
  },
  watch: {
    $route: {
      handler(route) {
        this.active = route.path;
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {
    ...mapState(["user", "menus"]),
    ...mapGetters(["tree"]),
  },
  mounted() {
    this.loadCurrentUserMenus();
  },
  methods: {
    ...mapActions(["loadCurrentUserMenusAction"]),

    async loadCurrentUserMenus() {
      const userId = this.user.id;
      await this.loadCurrentUserMenusAction({ userId });
      console.log(this.tree);
    },
    handleOpen(n) {},
    handleClose(n) {},
  },
};
</script>

<style lang="less" scoped>
.tac {
  width: 240px;
}
</style>